<template>
  <div class="list-wrapper">
    <div class="list-header van-hairline--top-bottom">
      <div @click="changeType('all')" :class="{ active: type === 'all' }">
        综合
      </div>
      <div @click="changeType('sale')" :class="{ active: type === 'sale' }">
        销量
      </div>
      <div
        @click="changeType('price-up', 'price-dwon')"
        class="price"
        :class="{
          'price-up': type === 'price-up',
          'price-dwon': type === 'price-dwon',
        }"
      >
        价格
      </div>
    </div>
    <div class="list-content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <GoodsCard v-for="(item, i) in goodsList" :key="i" v-bind="item" :num="counterMap[item.id]" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import GoodsCard from './GoodsCard';
export default {
  components: {
    GoodsCard,
  },
  data () {
    return {
      type: "all",
      isLoading: false,
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {
    ...mapState({
      goodsList: (state) => state.goodsList,
      counterMap: (state) => state.counterMap,
    })
  },
  methods: {
    ...mapMutations(['removeGoodsList']),
    ...mapActions(['getGoodsList']),
    async onLoad () {
      this.page += 1;
      this.loading = true;
      const reslut = await this.getGoodsList({page: this.page, sortType: this.type});
      if (reslut) {
        this.loading = false;
      } else {
        this.finished = true;
      }
    },
    async onRefresh () {
      this.isLoading = true;
      this.loading = true;
      this.finished = false;
      this.page = 1;
      this.removeGoodsList();
      await this.getGoodsList({page: this.page, sortType: this.type});
      this.isLoading = false;
      this.loading = false;
    },
    changeType (type, type1) {
      if (this.type === type) {
        if (this.type === "price-up") {
          this.type = type1;
          this.onRefresh();
          return;
        }
        return;
      }
      this.type = type;
      this.onRefresh();
    },
  },
};
</script>

<style lang="less">
.list-header {
  width: 296px;
  position: relative;
  top: 0;
  left: 79px;
  box-sizing: border-box;
  padding: 0;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
  > div {
    width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #cecece;
    position: relative;
  }
  .active,
  .price-up,
  .price-dwon {
    color: #ff1a90;
    font-weight: bold;
  }
  .price::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: #aaa;
    position: absolute;
    bottom: 4px;
    right: 0;
  }
  .price::before {
    content: "";
    border: 4px solid transparent;
    border-bottom-color: #aaa;
    position: absolute;
    top: 4px;
    right: 0;
  }
  .price-up::before {
    border-bottom-color: #ff1a90;
  }
  .price-dwon::after {
    border-top-color: #ff1a90;
  }
}
.list-content {
  width: 296px;
  position: fixed;
  top: 170px;
  right: 0;
  bottom: 50px;
  overflow: auto;
}

</style>
